<template>
    <div class="goodsList-container">
        <!-- 购物车列表区域 -->
        <div class="goods-list">
            <div class="mui-card" v-for="item in shopcarList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner goods-item">
                        <!-- 滑动开关--记忆选中情况 -->
						<mt-switch v-model="selectedObj[item.id]" @change="changeSelected(item.id,selectedObj[item.id])"></mt-switch>
                        <!-- 图片 -->
                        <img :src="item.thumb_path" alt="">
                        <!-- 信息区 -->
                        <div class="info">
                            <h1>{{item.title}}</h1>
                            <div class="goods-info">
                                <span class="price">￥{{item.sell_price}}</span>
                                <numbox :initcount="countObj[item.id]" :id="item.id"></numbox>
                                <a href="#" @click.prevent="delGoods(item.id)">删除</a>
                            </div>
                        </div>

					</div>
				</div>
			</div>
        </div>
        <!-- 结算区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner cart-foot">
                    <div class="message">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="highlight">{{selectedCount}}</span>件，总价<span class="highlight">￥{{selectedAmount}}</span></p>
                    </div>
                    <mt-button type="danger" size="small">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 导入vuex的映射函数
import {mapMutations, mapState} from 'vuex'
import {mapGetters} from 'vuex'
// 导入数量框组件
import numbox from '../sub-components/shopcarNumBox.vue'

export default {
    data:function(){
        return {
            value:true,
            shopcarList:[],
    }},
    computed:{
        ...mapState(['cart']),
        ...mapGetters(['idstr','countObj','selectedObj','selectedCount','selectedAmount']),
    },
    created:function(){
        this.getShopcarInfo();
    },
    methods:{
        ...mapMutations(['delFromCart','updateSelected']),
        getShopcarInfo:async function(){
            if(!this.cart.length) return;
            const {data} = await this.$http.get('/api/goods/getshopcarlist/'+this.idstr);
            console.log(data);
            if(data.status===0) this.shopcarList=data.message;
        },
        // 删除页面中相应信息
        delGoods:function(id){
            console.log(id);
            this.shopcarList.some((item,i)=>{
                if(item.id===id){
                    this.shopcarList.splice(i,1);
                    return true;
                }
            })
            this.delFromCart(id);
        },
        // 滑动按钮触发状态改变
        changeSelected:function(id,selected){
            this.updateSelected({id,selected});
        }
        
    },
    components:{
        numbox,
    }

}
</script>

<style lang="scss" scoped>
.goodsList-container{
    background-color: #eee;
    overflow: hidden;
}
.goods-item{
    display: flex;
    img{
        width: 60px;
        height: 60px;
        margin: 0 10px;
    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h1{
        font-size: 15px;
        }
        .goods-info{
            display: flex;
            justify-content: space-between;
            .price{
                color: red;
                font-weight: bold;
            }
        }
    }
}
.cart-foot{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .message{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .highlight{
        margin: 0 5px;
        color:#ef4f4f;
        font-weight: bold;
    }
}
</style>